<template>
    <!--项目详情-->
    <section class="public-header-content" id="Project-details">
        <header>项目详情</header>
        <div class="content clearfix">
            <h4><span>项目特色</span></h4>
            <aside v-html="isNull0(EstateHouseDetails.feature)"></aside>
            <h4><span>交通情况</span></h4>
            <aside v-html="isNull0(EstateHouseDetails.traffic)"></aside>
            <h4><span>项目配套</span></h4>
            <aside v-html="isNull0(EstateHouseDetails.mating)"></aside>
            <h4><span>周边学区</span></h4>
            <aside v-html="isNull0(EstateHouseDetails.schoolDistrict)"></aside>
            <h4><span>视频</span></h4>
            <aside v-html="isNull0(EstateHouseDetails.video)"></aside>
            <h4 v-show="LatLngNoDataShow"><span>地图</span></h4>
            <aside id="Project-details-map" v-show="LatLngNoDataShow"></aside>
        </div>

        <p v-show="false">{{getEstateHouseDetails}}</p>
    </section>
</template>

<script>
    mapboxgl.accessToken = 'pk.eyJ1Ijoiemh1c2VubGluIiwiYSI6ImNqb3B1cXhzNTAyZDczd255bG56eXBseTUifQ.acMNtSMPqs7tUQU5EP_5cg';

    export default {
        data() {
            return {
                EstateHouseDetails: {},
                thisHouse_myMap: null,//当前房源的地图
                LatLngNoDataShow: true, //地图没有数据提示信息是否显示
            }
        },
        computed: {
            //从state获取新房详情数据
            getEstateHouseDetails() {
                if(this.$store.getters.get_EstateHouseDetails){
                    this.EstateHouseDetails = this.$store.getters.get_EstateHouseDetails;
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_EstateHouseDetails).length != 0){
                        //判断经纬度数据是否为null空
                        if(this.EstateHouseDetails.latitude == 0 || this.EstateHouseDetails.latitude == null || this.EstateHouseDetails.latitude == ''){
                            this.LatLngNoDataShow = false;
                        }else{
                            this.LatLngNoDataShow = true;
                            //延时1s，否则会造成死循环，或者其他报错
                            this.$nextTick(() => {
                                //地图初始化
                                this.setMap();
                            });
                        }
                    }
                }
                return this.$store.getters.get_EstateHouseDetails
            },
        },
        created() {},
        mounted() {

        },
        methods: {
            //地图初始化
            setMap(){
                // console.log(this.EstateHouseDetails.latitude, this.EstateHouseDetails.longitude)

                if (!mapboxgl.supported()) {
                    this.$notification['warning']({
                        message: '优房数据提示您：',
                        description: '您的浏览器不支持Mapbox GL，为了保障您获得更友好的用户体验，请您下载升级您的浏览器，推荐使用火狐和谷歌！',
                        duration: 8
                    });
                } else {
                    //地图配置
                    this.thisHouse_myMap = new mapboxgl.Map({
                        container: 'Project-details-map',
                        style: 'mapbox://styles/mapbox/streets-v10?optimize=true',//optimize=true样式优化性能
                        zoom: 12,
                        center: [this.EstateHouseDetails.longitude, this.EstateHouseDetails.latitude],//地图居中在美国中部
                        minZoom: 3,//最大缩小比例
                        scrollZoom: false,//禁用滚轮缩放
                    });
                }

                this.thisHouse_myMap.addControl(new mapboxgl.NavigationControl());//添加控件——缩放按钮和指南针
                this.thisHouse_myMap.addControl(new mapboxgl.ScaleControl());//添加控件——比例尺

                //创建本房源marker点的样式及内容
                let thisHouse_marker_el = document.createElement('div');
                thisHouse_marker_el.className = 'thisHouse-marker-label';
                thisHouse_marker_el.innerHTML = '<img src="/static/img/hotCity-marker.png"/>';

                let thisHouseDetails_Popup = new mapboxgl.Popup({className: 'thisHouseDetails-popup'})
                    .setHTML(`<p>${this.EstateHouseDetails.title}</p>`);

                //添加到地图
                let elementarySchool_thisHouse_Marker = new mapboxgl.Marker(thisHouse_marker_el)
                    .setLngLat([this.EstateHouseDetails.longitude, this.EstateHouseDetails.latitude])
                    .setPopup(thisHouseDetails_Popup)
                    .addTo(this.thisHouse_myMap);

            }
        },
        components: {}
    }
</script>

<style lang="less" type="text/less">
    body {
        #Project-details{
            >.content{
                >h4{
                    text-align: left;
                    font-size: 18px;
                    color: #000;
                    height: 40px;
                    line-height: 40px;
                    border-bottom: 2px solid #000;
                    margin: 20px 0;
                    >span{
                        display: inline-block;
                        height: 42px;
                        line-height: 42px;
                        border-bottom: 4px solid #42a9ee;
                    }
                }
                >h4:first-of-type{
                    margin: 0 0 20px 0;
                }
                aside{
                    >iframe{
                        width: 100% !important;
                    }
                    img{
                        width: 100%;
                        margin: 10px 0;
                    }
                    p{
                        margin-bottom: 0;
                    }
                }
                //地图
                >#Project-details-map{
                    width: 100%;
                    height: 450px;
                    position: relative;
                    display: block;
                    .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan,
                    .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
                        overflow: hidden;
                    }
                    .thisHouseDetails-popup {
                        width: 200px;
                        z-index: 9;
                    }
                    .mapboxgl-canvas-container {
                        //本房源marker点的自定义样式
                        .thisHouse-marker-label {
                            display: inline-block;
                            z-index: 2;
                        }
                    }
                }
            }
        }
    }
</style>
